iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

學習JavaScript的基礎概念系列 第 7

Day7 call()、apply()、bind()

  • 分享至 

  • xImage
  •  

call()、apply()、bind()可控制函數的指向,可以借用其他函數的this。

.bind()

可以造任何你呼叫的函數的拷貝,複製你想呼叫的函數,創造拷貝,然後設定this變數想要指向什麼,bind()是拷貝,不會執行函數,不會呼叫。
bind可設定拷貝函數的永久參數值,可設定不會變的預設參數。

例1:
把函數當作物件,函後呼叫物件的方法,傳入想要this指向的物件。

var person = {
    firstname:'Jhon',
    lastname:'Doe',
    detFullName: function() {
        var fullname = this.fistname + ' ' +this.lastname;
        return fullname;
    }
}

var logName = function(lang1, lang2) {
    console.log('Logged:' + this.getFullName());
}

//在bind括號裡傳入rthis想指向的物件
var logPersonName = logNamw.bind(person);

logPersonName();

bind會回傳新的函數,複製logName函數,創造新的執行環境。
結果是
Logged: Jhon Doe

也可以這樣寫:

var person = {
    firstname:'Jhon',
    lastname:'Doe',
    detFullName: function() {
        var fullname = this.fistname + ' ' +this.lastname;
        return fullname;
    }
}



var logName = function(lang1, lang2) {
    console.log('Logged:' + this.getFullName()); 
}.bind(person); 




logName();

結果是
Logged: Jhon Doe

例2:
一樣可以接受參數

var person = {
    firstname:'Jhon',
    lastname:'Doe',
    detFullName: function() {
        var fullname = this.fistname + ' ' +this.lastname;
        return fullname;
    }
}

var logName = function(lang1, lang2) {
    console.log('Logged:' + this.getFullName());
    console.log('Arguments:' + lang1 + ' ' + lang2);
    console.log('...');
}


var logPersonName = logNamw.bind(person);
//傳入參數en


logPersonName('en');

結果是
Logged: Jhon Doe
Arguments: en undefined
...


.call ()

可以政this的值,也可以傳入參數,不像bind式創造函數的拷貝,call是會執行傳入的參數,先決定this變數是什麼,再來傳給函數參數,call會執行函數。

.apply()

可控制this的值,也可傳入參數,會執行函數,和call不一樣的地方是要用陣列接受參數。

傳入call的第一個東西,是this要指向的東西,call和bind不宜一樣不是拷貝,是執行函數。
例:
用call,並傳入參數

logName.call(person, 'en' , 'es');

結果是
Logged: Jhon Doe
Arguments: en es
...
apply()接受陣列作為參數,這是apply和call的唯一差別
例:

logName.apply(person, ['en' , 'es']);

結果是
Logged: Jhon Doe
Arguments: en es
...

logName.apply(person, 'en' , 'es');

結果會出現錯誤

也可用函式表示式讓apply或call立即呼叫
例:

var person = {
    firstname:'Jhon',
    lastname:'Doe',
    detFullName: function() {
        var fullname = this.fistname + ' ' +this.lastname;
        return fullname;
    }
}

( function(lang1, lang2) { 
    console.log('Logged:' + this.getFullName());
    console.log('Arguments:' + lang1 + ' ' + lang2);
    console.log('...');
}).apply(person, ['en' , 'es']); 






結果是
Logged: Jhon Doe
Arguments: en es
...


用apply舉其他例子
例:

var person2 = { 
    firstname:'Jhon',
    lastname:'Doe',

    }
}
console.log(person.getFullName.apply(person2));

結果是
Jhon Doe


Function curring

建立一個函數的拷貝bind,並設定預設的參數,有利於資料庫做數學運算。

用bind給的參數,會設定為拷貝函數的永久參數值
例1:
第一個參數a會永遠是2

function multiply(a,b){
    return a*b;
}

var multipleByTwo = multiply.bind(this,2);

//帶入第二個參數b
console.log(multipleByTwo(4));

結果是
8

例1:
參數a和b會永遠是2

function multiply(a,b){
    return a*b;
}

var multipleByTwo = multiply.bind(this,2);

//帶入參數
console.log(multipleByTwo(4));

結果是
4

例1:
不設參數

function multiply(a,b){
    return a*b;
}

var multipleByTwo = multiply.bind(this);

//帶入參數
console.log(multipleByTwo(2,5));

結果是
10


上一篇
Day6 參數arguments
下一篇
Day8 函數建構式,「new」
系列文
學習JavaScript的基礎概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言